<template>
  <div class="workbench">
    <div class="header">
      <div class="header_left">
        <div
          style="
            width: 70px;
            height: 70px;
            margin: 0px 0px 0px 32px;
            border-radius: 50%;
          "
        >
          <img
            :src="user.profile_photo"
            alt=""
            style="width: 100%; line-height: 70px"
            v-if="user.profile_photo != ''"
          />
          <img
            :src="default_avatar"
            alt=""
            style="width: 100%; line-height: 70px"
            v-else
          />
        </div>
        <div
          style="margin: 0px 0px 0px 23px; white-space: nowrap"
          class="fontFamiley"
        >
          您好,{{ user.nickname }}。开始您一天的工作吧！
        </div>
        <div style="float: right; margin: 10px 0px 0px 10px; width: 400px">
          <div>
            <el-input
              v-model="model_value"
              placeholder="例如1:DS2310160Z0C + Enter | 例如2: 全部运单"
              style="border: none"
              size="medium"
              @keyup.enter.native="querydata()"
            ></el-input>
          </div>
          <div>
            <div v-for="(item, index) in resultList">
              <div
                @click="redirect(item)"
                style="
                  margin: 10px 0px 0px 12px;
                  color: #409eff;
                  cursor: pointer;
                "
              >
                {{ item.meta.title }}
              </div>
            </div>
          </div>
          <div>
            <div
              style="margin: 10px 0px 0px 12px; color: #409eff; cursor: pointer"
              @click="PageJumps(dataList.id)"
            >
              {{ dataList.waybill_no }}
              {{ dataList.status | afterTime(dataList.status) }}
            </div>
          </div>
        </div>
      </div>

      <div
        class="header_right"
        @click="allorderJump('ordernumber')"
        v-if="user.type == 1"
      >
        <div
          style="
            width: 50px;
            height: 50px;
            background: #f3f4fa;
            margin: 0px 0px 0px 32px;
            border-radius: 50%;
          "
        >
          <span
            class="el-icon-document"
            style="
              font-size: 30px;
              color: #708dee;
              line-height: 50px;
              display: block;
              text-align: center;
            "
          ></span>
        </div>
        <div style="margin: 0px 32px 0px 12px" class="fontFamiley">去下单</div>
      </div>
    </div>

    <div class="Upcontent" v-if="leadShow">
      <div class="content-title">初始化引导</div>
      <div class="Upcontent_client">
        <div class="content init-lead">
          <el-row>
            <el-col :span="6">
              <div class="lead-item" @click="leadJump(1)">
                <div class="text">导入基础资料数据</div>
                <div class="tip">导入车辆信息、客户信息等</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="lead-item" @click="leadJump(2)">
                <div class="text">导入历史业务数据</div>
                <div class="tip">导入运单信息等</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="lead-item" @click="leadJump(3)">
                <div class="text">配置业务规则</div>
                <div class="tip">配置业务规则</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="lead-item" @click="leadJump(4)">
                <div class="text">开始使用</div>
                <div class="tip">开始使用吧！</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="Upcontent" v-if="user.type == 1">
      <div
        class="Upcontent_client"
        v-if="permissions.includes('/api/order/list')"
      >
        <el-row>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(0)">
                <span class="span_font_2">待受理</span><br />
                <span class="span_font">{{ infodata.Pending_acceptance }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(1)">
                <span class="span_font_2">已受理</span><br />
                <span class="span_font">{{ infodata.Have_entertained }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(2)">
                <span class="span_font_2">揽收中</span><br />
                <span class="span_font">{{ infodata.process_receiving }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(3)">
                <span class="span_font_2">运输中</span><br />
                <span class="span_font">{{ infodata.in_transit }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(4)">
                <span class="span_font_2">配送中</span><br />
                <span class="span_font">{{ infodata.in_delivery }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col :span="4" class="ELCol">
            <div class="client_one_style">
              <div class="client_font_size" @click="allorderJump(5)">
                <span class="span_font_2">已签收</span><br />
                <span class="span_font">{{ infodata.been_signed }}</span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="Upcontent" v-if="user.type == 0 || user.type == 3">
      <div class="Upcontent_client">
        <el-row>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/collect/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(0)">
                <span class="span_font_2">待揽收</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_0' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/collect/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(1)">
                <span class="span_font_2">揽收中</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_1' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/dispatch/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(2)">
                <span class="span_font_2">待创建干线</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_2' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/dispatch/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(3)">
                <span class="span_font_2">待发车</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_3' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/dispatch/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(4)">
                <span class="span_font_2">已发车</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_4' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/distribution/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(5)">
                <span class="span_font_2">待配送</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_5' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/distribution/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(6)">
                <span class="span_font_2">配送中</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_6' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/sign/delivery/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(7)">
                <span class="span_font_2">待签收</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_7' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill/sign/delivery/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(9)">
                <span class="span_font_2">待自提</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_9' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_receipt/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(8)">
                <span class="span_font_2">待回单</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_8' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>

          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_receipt/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(10)">
                <span class="span_font_2">回单待签收</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_10' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_box_recyle/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(11)">
                <span class="span_font_2">待回箱</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_11' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_box_recyle/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(12)">
                <span class="span_font_2">待干线签收</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_12' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_box_recyle/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(13)">
                <span class="span_font_2">待末端签收</span><br />
                <span class="span_font">
                  <countTo  :endVal='difStageData.difStageData_13' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_box_recyle/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(14)">
                <span class="span_font_2">待审批</span><br />
                <span class="span_font">
                  <countTo  :endVal='examineRecord.to_process_examine_cnt' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            class="ELCol"
            v-if="permissions.includes('/api/waybill_box_recyle/stay/list')"
          >
            <div class="client_one_style">
              <div class="client_font_size" @click="routerJump(15)">
                <span class="span_font_2">审批中</span><br />
                <span class="span_font">
                  <countTo  :endVal='examineRecord.processing_examine_cnt' :duration='2200'></countTo>
                </span>
                <span class="span_font_1">个</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 图表 -->
    <ModulesIndex></ModulesIndex>
    <!-- <div class="OrderFome">
      <div style="width: 50%;
      background: #ffffff;
      border-radius: 6px;">
        <div id="main" style="min-width: 80%; height: 400px; padding: 0px 0px 0px 0px"></div>
      </div> -->
    <!-- <div class="list-box" style="width: 330px;
      background: #ffffff;
      border-radius: 6px;margin: 0px 0px 0px 10px;height: 400px;overflow: scroll;overflow-x:hidden;"> -->
    <!-- <div v-if="tableData.length == 0" class="tablestyle" style="background: linear-gradient( #E3F0FF, #FFFFFF);text-align: center;font-weight: bold;font-size: 16px;height: 50px;line-height: 50px;" >暂无任务</div>
        <div style="padding: 0px 0px 5px 0px;"></div>
        <div v-for="(itme,index) in tableData" class="tablestyle" :style="{'background': getBackgroundColor(index)}">
          <div style="text-align: center;font-size: 16px ;font-weight: bold;padding: 10px 0px 0px 0px;">
            {{itme.branch_id_name}}任务</div>
          <div style="display: flex;flex-wrap:wrap;">
            <div class="tableELCol" @click="Timeoutjump(itme.branch_id,itme.collect_id)"
              v-if="itme.collect_count != ''">
              <div class="tableELColMe">
                {{itme.collect_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.collect_id_name}}超时</div>
            </div>
            <div class="tableELCol" v-if="itme.dispatch_count != ''"
              @click="Timeoutjump(itme.branch_id,itme.dispatch_id)">
              <div class="tableELColMe">
                {{itme.dispatch_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.dispatch_id_name}}超时</div>
            </div>
            <div class="tableELCol" v-if="itme.distribution_count != ''"
              @click="Timeoutjump(itme.branch_id,itme.distribution_id)">
              <div class="tableELColMe">
                {{itme.distribution_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.distribution_id_name}}超时</div>
            </div>
            <div class="tableELCol" v-if="itme.sign_count != ''" @click="Timeoutjump(itme.branch_id,itme.sign_id)">
              <div class="tableELColMe">
                {{itme.sign_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.sign_id_name}}超时</div>
            </div>
            <div class="tableELCol" v-if="itme.receipt_count != ''"
              @click="Timeoutjump(itme.branch_id,itme.receipt_id)">
              <div class="tableELColMe">
                {{itme.receipt_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.receipt_id_name}}超时</div>
            </div>
            <div class="tableELCol" v-if="itme.box_recycle_count != ''"
              @click="Timeoutjump(itme.branch_id,itme.box_recycle_id)">
              <div class="tableELColMe">
                {{itme.box_recycle_count}}</div>
              <div style="line-height: 24px;color: #7F8283;">{{itme.box_recycle_id_name}}超时</div>
            </div>
          </div>
        </div>
      </div> -->
    <!-- <div class="OrderFome_document" style="max-width: 330px" v-permission="'station_mail_list'">
        <div class="OrderFome_text">
          <div style="
              height: 46px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #f2f3f5;
            ">
            <div style="font-weight: bold; font-size: 16px">我的消息</div>
            <div style="font-size: 13px; color: #165dff">
              <a href="/message/myMessages" style="color: #409eff">
                查看更多
              </a>
            </div>
          </div>
          <div style="
              line-height: 36px;
              font-size: 12px;
              color: #86909c;
              height: 319px;
              width: 100%;
            ">
            <div @click="showDetailDialog(item)" style="
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              " v-for="item in messageList" :key="item.id">
              <el-badge style="margin: 0 5px" :is-dot="item.is_read === '0'" :hit="true">
                <el-tag :style="{
                    color: '#' + item.font_color + ' !important',
                    'background-color':
                      '#' + item.background_color + ' !important',
                    'border-radius': 0,
                    border: 'none !important',
                  }">{{
                  item.type === "0" ? "通知" : item.type === "1" ? "预警" : ""
                  }}</el-tag>
              </el-badge>
              <span style="padding: 10px 0">{{ item.body }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="OrderFome">
      <div class="list-box" style="width: 400px;
      background: #ffffff;
      border-radius: 6px;height: 400px;overflow: scroll;overflow-x:hidden;">
        <div style="display: flex;justify-content:space-between;margin: 10px;">
          <div style="font-weight:600;line-height:28.5px;">各大区成本异常统计</div>
          <div>
            <el-radio-group v-model="qualityway" @change="quality_operation_reminderObj()">
              <el-radio-button label="1" >月</el-radio-button>
              <el-radio-button label="2" >周</el-radio-button>
            <el-radio-button label="3" >三天</el-radio-button> -->
    <!-- </el-radio-group>
          </div>
        </div>
        <div style="margin: 0px 0px 0px 10px;">
          <el-table :data="qualityTableData.result" @cell-click="handleCellClick" >
            <el-table-column v-for="column in qualityTableData.item_list" :key="column.show_name" :prop="column.show_name"
              :label="column.title">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="OrderFome">
      <div class="OrderFome_number">
      </div>  -->
    <!-- </div> -->
    <!-- <div class="OrderFome"> -->
    <!-- <div class="OrderFome_number">
        <div class="content-title">身份认证</div>
        <IndexusrCenter v-if="user.type == 1"></IndexusrCenter>
        <div class="wrapper_list" v-if="user.type == 0">
          <el-card shadow="hover" class="content-card">
            <div class="part">
              <h3>升级为承运商</h3>
              <el-card shadow="hover" class="btn respect">
                <p>我要成为渡石承运商</p>
                <div class="item-discribtion">
                  <span>我有承运资质，我想承接渡石的运单</span>
                  <span class="dis-right">敬请期待</span>
                </div>
              </el-card>
            </div>
          </el-card>
        </div>
      </div> -->
    <!-- <div class="OrderFome_document">
        <div class="OrderFome_text">
          <div style="
              height: 46px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              border-bottom: 1px solid #f2f3f5;
            ">
            <div style="font-weight: bold; font-size: 16px">帮助文档</div>
            <div style="font-size: 13px; color: #165dff">
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/space/7156125355529469954?ccm_open_type=lark_wiki_spaceLink"
                style="color: #409eff">
                查看更多
              </a>
            </div>
          </div>
          <div style="
              line-height: 35px;
              font-size: 13px;
              color: #86909c;
              height: 319px;
              width: 100%;
            ">
            <span>
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnGjolGvWuBijNNCF2ppqb3d" style="color: #86909c">如何下订单</a>
            </span><br />
            <span>
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcno2XOIup4tPq24vT6kleKnb"
                style="color: #86909c">如何查询订单的物流信息</a> </span><br />
            <span>
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnOrgk1sjcBXZvGwlDfvCupg"
                style="color: #86909c">如何查询订单的温度数据</a> </span><br />
            <span>
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcn9tyH8D7RrYUiNBc8YFHRTe"
                style="color: #86909c">如何打印运单、打印标签</a> </span><br />
            <span>
              <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnUvUPls9TUcknmO3c5F6aAf"
                style="color: #86909c">如何增加发货客户的账号</a> </span><br />
            <div v-if="user.type == 0 || user.type == 3">
              <span>
                <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnTozBuy2yx2C4BiobTPkWyf"
                  style="color: #86909c">如何管理运单流程</a> </span><br />
              <span>
                <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnpMAP7r56zb0JZ8dprvUZWb"
                  style="color: #86909c">如何使用小程序</a> </span><br />

              <span>
                <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnCSj1sjBK3zpIlkZpY4x1cb"
                  style="color: #86909c">如何配置计费规则</a> </span><br />
              <span>
                <a href="https://jm9cmb7qeb.feishu.cn/wiki/wikcnRhOmkrE1TIMDExnKeWMjMg"
                  style="color: #86909c">如何使用超温预警功能</a> </span><br />
            </div>
          </div>
        </div>
      </div> -->
    <!-- </div> -->
  </div>
</template>

<script>
import Vue from "vue";
import { reqMyMessagesList, reqMyMessagesDetail } from "@/api/message";
import { getToken, getNowFormatDate } from "@/utils/auth";
import echarts from "echarts";
import { INfOuserList, countinfo } from "@/api/user";
import IndexusrCenter from "./components/indexusrCenter.vue";
import { reqOrderFormData } from "@/api/orderForm";
import { waybilltransporttransport } from "@/api/message";
import ModulesIndex from "./components/modulesIndex.vue";
import countTo from 'vue-count-to';

import {
  overtimerecordsshow,
  quality_operation_reminder_loss_statistics,
} from "@/api/Largewidthmeterlist";
export default {
  name: "workbench",
  components: { IndexusrCenter, ModulesIndex,countTo },
  data() {
    return {
      // 0员工 1客户,2司机,3承运商，4系统对接
      user: "",
      // 客户具体的数据
      infodata: {
        order_form: 0, //订单数
        Pending_acceptance: 0, //待受理
        Have_entertained: 0, //已受理
        process_receiving: 0, //揽收中
        in_transit: 0, //运输中
        in_delivery: 0, //配送中
        been_signed: 0, //已签收
      },
      // 承运商具体数据
      difStageData: {
        difStageData_0: 0, //待揽收
        difStageData_1: 0, //揽收中
        difStageData_2: 0, //待创建干线
        difStageData_3: 0, //待发车
        difStageData_4: 0, // 已发车
        difStageData_5: 0, // 待配送
        difStageData_6: 0, //配送中
        difStageData_7: 0, //待签收
        difStageData_8: 0, //待回单（已签收）
        difStageData_9: 0, //待自提
        difStageData_10: 0, // 回单代签收
        difStageData_11: 0, //待回箱
        difStageData_12: 0, //回箱待干线签收
        difStageData_13: 0, //回箱待末端签收
      },
      examineRecord: {
        processing_examine_cnt: "",
        to_process_examine_cnt: "",
      },
      // 横纵坐标数据
      xAxisList: [],
      yAxisList: [],
      // 默认头像
      default_avatar:
        "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/12/1663666216761origin_img_v2_e364c210-9857-497c-ab11-3b9492048f7g.png",
      jurisdiction: [], //权限
      jurisdiction_list: [], //权限列表
      texttitle: "",
      permissions: [],
      // messageList: [],
      leadShow: false,
      model_value: "",
      filteredData: [],
      resultList: [],
      router_opeen: this.$store.state.orderForm.router_open,
      dataList: "",
      tableData: [],
      qualityTableData: [],
      qualityway: 1,
    };
  },
  created() {},
  watch: {
    model_value(item1, item2) {
      if (item1 != "") {
        const matchingObjects = [];
        // 使用关键字将数据数组中的元素进行筛选
        this.$store.state.permission.RouteJump.forEach((item) => {
          if (item.meta && item.meta.title) {
            // 使用toLowerCase()函数将关键字和标题都转换为小写，以不区分大小写进行搜索
            const itemTitle = item.meta.title.toLowerCase();
            const searchTerm = item1.toLowerCase();
            // 使用includes()函数检查标题是否包含关键字
            if (itemTitle.includes(searchTerm)) {
              matchingObjects.push(item);
            }
          }
        });
        this.resultList = matchingObjects;
      } else {
        this.resultList = [];
      }
    },
  },
  filters: {
    afterTime(value) {
      if (value == 0) {
        return "待揽收";
      } else if (value == 1) {
        return "揽收中";
      } else if (value == 2) {
        return "待创建干线";
      } else if (value == 3) {
        return "待发车";
      } else if (value == 4) {
        return "已发车";
      } else if (value == 5) {
        return "待配送";
      } else if (value == 6) {
        return "配送中";
      } else if (value == 7) {
        return "待签收";
      } else if (value == 8) {
        return "已签收";
      } else if (value == 10) {
        return "已完结";
      }
      // return "导出错误数据";
    },
  },
  computed: {},
  mounted() {
    let that = this;
    that.router_opeen = this.$store.state.orderForm.router_open;
    INfOuserList({ token: getToken("Token") }).then((res) => {
      this.user = res.data;
      // this.quality_operation_reminderObj()
      // var dataname = ["管理员", "运营总监", "运营", "商服"]
      var timedata = this.user.role_data.map((item) => item.role_name);
      // var namedata = that.getINculde(timedata, dataname)
      // if (namedata) {
      //   that.thermometermonitorObj()
      // }
    });
    this.OperatinalData();
    this.permissions = this.$store.state.user.arrList;
    // Vue.prototype.$socket.socket.onmessage = function (event) {
    //   that.getMessageList();
    // };
    // this.getMessageList();
    reqOrderFormData({
      page: 1,
      page_size: 20,
    }).then((res) => {
      if (res.code === 10000) {
        if (res.data.total <= 10) {
          this.leadShow = true;
        }
      }
    });

    // if(that.user.includes(dataname)) {
    //
    // }
  },
  methods: {
    getBackgroundColor(value) {
      // 根据不同的值返回不同的颜色
      if (value == 0) {
        return "linear-gradient( #E3F0FF, #FFFFFF)";
      } else if (value == 1) {
        return "linear-gradient( #FFFBEA, #FFFFFF)";
      } else if (value == 2) {
        return "linear-gradient( #F0F9EB, #FFFFFF)";
      } else if (value == 3) {
        return "linear-gradient(#F4F4F5, #FFFFFF)";
      } else if (value == 4) {
        return "linear-gradient(#FEF0F0, #FFFFFF)";
      } else {
        return "linear-gradient( #E3F0FF, #FFFFFF)";
      }
    },
    redirect(data) {
      this.$router.push({ name: data.urL });
      this.dialogVisible = false;
      this.model_value = "";
      this.resultList = [];
    },
    PageJumps(id) {
      this.model_value = "";
      this.dataList = "";
      this.dialogVisible = false;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id },
      });
      window.open(text.href, "_blank");
    },
    querydata() {
      var param = {
        waybill_no: this.model_value,
      };
      waybilltransporttransport(param).then((res) => {
        this.dataList = res.data.data.waybill;
      });
    },
    leadJump(val) {
      switch (val) {
        case 1:
          this.$router.push({
            path: "/companymanagement/datatransfer",
            // query: { type: value + "" },
          });
          break;
        case 2:
          this.$router.push({
            path: "/companymanagement/datatransfer",
            query: { type: "1" },
          });
          break;
        case 3:
          this.$router.push({
            path: "/companymanagement/SystemManagement",
          });
          break;
        case 4:
          this.$router.push({
            path: "/orderform/allOrder",
            // query: { type: value + "" },
          });
          break;
        default:
          break;
      }
    },
    // async getMessageList() {
    //   let res = await reqMyMessagesList({});
    //   this.messageList = res.data.data.slice(0, 9);
    // },
    // async showDetailDialog(val) {
    //   let res = await reqMyMessagesDetail({
    //     message_id: val.id,
    //   });
    //   if (res.data.jump_link) {
    //     this.$confirm(res.data.body, "消息通知", {
    //       cancelButtonText: "关闭",
    //       confirmButtonText: "去处理",
    //       customClass: "dialogClass",
    //     })
    //       .then(() => {
    //         this.getMessageList();
    //         window.open(res.data.jump_link, "_blank");
    //         // this.$router.push({
    //         //   path: res.data.jump_link,
    //         //   query: { id: res.data.jump_id },
    //         // });
    //       })
    //       .catch(() => {
    //         this.getMessageList();
    //       });
    //   } else {
    //     this.$alert(res.data.body, "消息通知", {
    //       confirmButtonText: "关闭",
    //       customClass: "dialogClass",
    //       callback: (action) => {
    //         this.getMessageList();
    //       },
    //     });
    //   }
    // },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.texttitle,
          top: 15,
          left: 35,
          textStyle: {
            color: "#101010",
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.xAxisList,
        },
        yAxis: {
          type: "value",
          // scale : true,
          axisLabel: {
            //每个数据都加单位
            formatter: "{value}",
          },
        },
        series: [
          {
            data: this.yAxisList,
            type: "line",
            smooth: true,
            encode: {
              x: "category",
              y: "Income",
              itemName: "category",
              tooltip: ["Income"],
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleResize() {
      // 调整图表大小
      this.chartInstance.resize();
    },
    //  获取工作台数据
    OperatinalData() {
      var param = {
        start_time: 0,
        end_time: 0,
      };
      countinfo(param).then((res) => {
        if (res.code == 10000) {
          const orderData = res.data.order_data;
          const countList = res.data.per_day_waybill_count_list;
          const difStageCount = res.data.dif_stage_count;
          const examineRecord = res.data.examine_record_cnt;

          if (orderData != null) {
            const perDayOrdert = orderData.per_day_order_count_list;
            this.infodata.order_form = orderData.total_count;
            if (orderData.per_status_order_count_list != null) {
              for (
                var i = 0;
                i < orderData.per_status_order_count_list.length;
                i++
              ) {
                this.jurisdiction.push(
                  orderData.per_status_order_count_list[i].order_status
                );
                switch (orderData.per_status_order_count_list[i].order_status) {
                  case "0":
                    this.infodata.Pending_acceptance =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                  case "1":
                    this.infodata.Have_entertained =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                  case "2":
                    this.infodata.process_receiving =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                  case "3":
                    this.infodata.in_transit =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                  case "4":
                    this.infodata.in_delivery =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                  case "5":
                    this.infodata.been_signed =
                      orderData.per_status_order_count_list[i].order_count;
                    break;
                }
              }
            }
            // if (perDayOrdert != null) {
            //   if (perDayOrdert.length > 0) {
            //     for (var i = 0; i < perDayOrdert.length; i++) {
            //       this.xAxisList.push(perDayOrdert[i].order_date);
            //       this.yAxisList.push(perDayOrdert[i].order_count);
            //     }
            //     this.texttitle = "订单数(近7天)";
            //     this.myEcharts();
            //   } else {
            //     this.newDate();
            //     this.myEcharts();
            //   }
            // } else if (countList != null) {
            //   if (countList.length > 0) {
            //     for (var i = 0; i < countList.length; i++) {
            //       this.xAxisList.push(countList[i].waybill_date);
            //       this.yAxisList.push(countList[i].waybill_count);
            //     }
            //     this.texttitle = "运单数(近7天)";
            //     this.myEcharts();
            //   } else {
            //     this.newDate();
            //     this.myEcharts();
            //   }
            // }
            // else {
            //   this.newDate();
            //   this.myEcharts();
            // }
          }

          if (difStageCount != null) {
            for (var i = 0; i < difStageCount.length; i++) {
              this.jurisdiction_list.push(difStageCount[i].status);
              switch (difStageCount[i].status) {
                case "0":
                  this.difStageData.difStageData_0 = difStageCount[i].count;
                  break;
                case "1":
                  this.difStageData.difStageData_1 = difStageCount[i].count;
                  break;
                case "2":
                  this.difStageData.difStageData_2 = difStageCount[i].count;
                  break;
                case "3":
                  this.difStageData.difStageData_3 = difStageCount[i].count;
                  break;
                case "4":
                  this.difStageData.difStageData_4 = difStageCount[i].count;
                  break;
                case "5":
                  this.difStageData.difStageData_5 = difStageCount[i].count;
                  break;
                case "6":
                  this.difStageData.difStageData_6 = difStageCount[i].count;
                  break;
                case "7":
                  this.difStageData.difStageData_7 = difStageCount[i].count;
                  break;
                case "8":
                  this.difStageData.difStageData_8 = difStageCount[i].count;
                  break;
                case "9":
                  this.difStageData.difStageData_9 = difStageCount[i].count;
                  break;
                case "10":
                  this.difStageData.difStageData_10 = difStageCount[i].count;
                  break;
                case "11":
                  this.difStageData.difStageData_11 = difStageCount[i].count;
                  break;
                case "12":
                  this.difStageData.difStageData_12 = difStageCount[i].count;
                  break;
                case "13":
                  this.difStageData.difStageData_13 = difStageCount[i].count;
                  break;
              }
            }
          }
          if (examineRecord !== null) {
            this.examineRecord.to_process_examine_cnt =
              examineRecord.to_process_examine_cnt;
            this.examineRecord.processing_examine_cnt =
              examineRecord.processing_examine_cnt;
          }
        }
      });
    },

    // 获取时间
    newDate() {
      // 获取当前时间戳
      const now = Date.now();
      // 一天的毫秒数
      const dayMillis = 24 * 60 * 60 * 1000;
      // 存储转换后的时间戳和日期字符串的数组
      const result = [];
      const result_time = [];
      // 循环获取前7天的时间戳并转换成日期字符串
      for (let i = 0; i < 7; i++) {
        // 计算时间戳
        const timestamp = now - i * dayMillis;
        // 转换成日期对象
        const dateObj = new Date(timestamp);
        // 获取年月日
        const year = dateObj.getFullYear();
        const month = String(dateObj.getMonth() + 1).padStart(2, "0");
        const day = String(dateObj.getDate()).padStart(2, "0");
        // 拼接成日期字符串
        const dateString = `${year}-${month}-${day}`;
        // 存储时间戳和日期字符串
        result.push({ timestamp, dateString });
        result_time.push(dateString);
      }
      this.xAxisList = result_time.reverse();
      this.yAxisList = [0, 0, 0, 0, 0, 0, 0];
    },
    // 订单跳转
    allorderJump(value) {
      this.$router.push({
        path: "/orderform/allOrder",
        query: { type: value + "" },
      });
    },
    // 路由跳转
    routerJump(value) {
      switch (value) {
        case 0:
          this.$router.push({
            path: "/waybill/deliveryListpage",
            query: { type: "0" },
          });
          break;
        case 1:
          this.$router.push({
            path: "/waybill/deliveryListpage",
            query: { type: "1" },
          });
          break;
        case 2:
          this.$router.push({
            path: "/waybill/trunklinelistpage",
            query: { type: "0" },
          });
          break;
        case 3:
          this.$router.push({
            path: "/waybill/trunklinelistpage",
            query: { type: "1" },
          });
          break;
        case 4:
          this.$router.push({
            path: "/waybill/trunklinelistpage",
            query: { type: "2" },
          });
          break;
        case 5:
          this.$router.push({
            path: "/waybill/distributionlistpage",
            query: { type: "0" },
          });
          break;
        case 6:
          this.$router.push({
            path: "/waybill/distributionlistpage",
            query: { type: "1" },
          });
          break;
        case 7:
          this.$router.push({
            path: "/waybill/signforlistpage",
            query: { type: "1" },
          });
          break;
        case 8:
          this.$router.push({
            path: "/waybill/receiptlistpage",
            query: { type: "3" },
          });
          break;
        case 9:
          this.$router.push({
            path: "/waybill/signforlistpage",
            query: { type: "0" },
          });

          break;
        case 10:
          this.$router.push({
            path: "/waybill/receiptlistpage",
            query: { type: "1" },
          });
          break;
        case 11:
          this.$router.push({
            path: "/waybill/recyclelistpage",
            query: { type: "3" },
          });
          break;
        case 12:
          this.$router.push({
            path: "/waybill/recyclelistpage",
            query: { type: "0" },
          });
          break;
        case 13:
          this.$router.push({
            path: "/waybill/recyclelistpage",
            query: { type: "1" },
          });
          break;
        case 14:
          this.$router.push({
            path: "/companymanagement/auditrecordsList",
            query: { type: "0" },
          });
          break;
        case 15:
          this.$router.push({
            path: "/companymanagement/auditrecordsList",
            query: { type: "3" },
          });
          break;
      }
    },
    thermometermonitorObj() {
      var newnow = getNowFormatDate();
      var param = {
        create_day: newnow,
      };
      overtimerecordsshow(param).then((res) => {
        this.tableData = res.data;
      });
    },
    Timeoutjump(router, node_id) {
      this.$router.push({
        name: "TimeOutwarningList",
        query: {
          branch_id: router,
          node_id: node_id,
        },
      });
    },
    getINculde(timedata, dataname) {
      let temp = [];
      var item = "";
      for (item in dataname) {
        timedata.includes(dataname[item]) ? temp.push(dataname[item]) : "";
      }
      return temp.length ? true : false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-badge__content.is-fixed.is-dot {
  top: 10px;
  left: -15px;
}

.list-box::-webkit-scrollbar {
  width: 5px;
  /* background: red; */
}

.list-box::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #c7c4c4;
}

.tablestyle {
  width: 290px;
  /* background: red; */
  margin: 0 auto;
  border-radius: 6px;
  margin-bottom: 10px;
  /* margin-top: 10px; */
  border: 1px solid #b2b9d4;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  /* padding: 10px; */
  /* margin: 0px 10px 10px 10px; */
}

.tableELCol {
  height: 50px;
  margin: 10px 0px 10px 10px;
  text-align: center;
  /* border-right: 1px solid #E2E4E5; */
  padding: 0px 10px 10px 10px;
  cursor: pointer;
  /* border: 1px solid red; */
}

.tableELCol:nth-child(3n) {
  border-right: none;
}

.tableELCol:last-child {
  border-right: none;
}

.tableELColMe {
  margin: 12px 0px 0px 0px;
  font-size: 20px;
  font-weight: bold;
  color: #ca6968;
}

.el-badge {
  span {
    padding: 0 10px;
  }
}

.dialogClass {
  p {
    word-wrap: break-word;
  }
}

.fontFamiley {
  font-size: 18px;
  font-family: 黑体;
  font-weight: bold;
  color: #515a6e;
}

.header {
  width: 100%;
  height: 118px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
}

.span_font {
  font-size: 20px;
  font-family: 黑体;
  font-weight: bold;
}

.span_font_1 {
  font-size: 11px;
  padding: 0px 0px 0px 5px;
}

.span_font_2 {
  font-size: 11px;
}

.header_left {
  /* max-width: 450px; */
  min-height: 118px;
  display: flex;
  align-items: center;
}

.header_right {
  max-width: 230px;
  height: 118px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 6px;
}

.Upcontent {
  // width: 98%;
  // margin: 0 auto;
  // margin-top: 1%;
  background: #ffffff;
  margin: 10px;
  border-radius: 6px;
}

.Upcontent_client {
  width: 95%;
  margin: 0 auto;
}

.client_one {
  width: 100%;
  /* height: 98px; */
  display: flex;
  align-items: center;
  /* background: red; */
}

.client_one_style {
  height: 60px;
  display: flex;
  line-height: 25px;
  border-right: 1px solid #f2f3f5;
}

.ELCol {
  border-bottom: 1px solid#f2f3f5;
  padding: 12px 0;
}

.ELCol:nth-child(6n) > .client_one_style {
  border-right: none;
}

.ELCol:last-child > .client_one_style {
  border-right: none;
}

.client_font_size {
  padding: 0px 0px 0px 20px;
  cursor: pointer;
}

.client_img {
  width: 62px;
  height: 56px;
  background: tomato;
}

.OrderFome {
  width: 98%;
  // height: 391px;
  margin: 0 auto;
  margin-top: 1%;
  display: flex;
}

.OrderFome_number {
  width: 75%;
  background: #ffffff;
  border-radius: 6px;
}

#main {
  /* max-width: 700px; */
}

.OrderFome_document {
  min-width: 330px;
  // flex: 1;
  background: #ffffff;
  // height: 391px;
  margin-left: 1%;
  border-radius: 6px;
}

.OrderFome_text {
  width: 90%;
  height: 391px;
  margin: 0 auto;
}

.content-title {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  // line-height: 50px;
  padding-top: 15px;
  padding-left: 20px;
  font-weight: bold;
}

.content-card {
  width: 420px;
  border-radius: 10px;
  // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(187, 187, 187, 1);

  /deep/.el-card__body,
  .el-main {
    padding: 20px 28px;
  }

  .part {
    margin-bottom: 20px;

    h3 {
      color: rgba(78, 89, 105, 1);
      font-size: 28px;
      line-height: 42px;
      font-weight: bold;
    }

    .btn {
      margin-top: 10px;
      border-radius: 5px;
      padding-left: 5px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(187, 187, 187, 1);

      &.respect {
        background-color: rgba(239, 239, 239, 1);
        pointer-events: none;
      }

      /deep/.el-card__body,
      .el-main {
        padding: 16px;
      }

      p {
        color: rgba(78, 89, 105, 1);
        font-size: 14px;
        line-height: 26px;
      }

      span {
        color: rgba(154, 154, 154, 1);
        font-size: 14px;
      }

      .item-discribtion {
        display: flex;
        justify-content: space-between;

        .dis-right {
          color: rgba(22, 93, 255, 1);
        }
      }
    }
  }
}

.wrapper_list {
  padding: 10px;
  padding-left: 20px;
}

.lead-item {
  // width:90%;
  // margin:10px;
  margin: 20px 10px;
  padding: 16px 15px;
  border: solid 1px #f2f3f5;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 16px 0 rgba(80, 80, 80, 0.1);

  .text {
    font-size: 16px;
    line-height: 24px;
    // font-weight:bold;
  }

  .tip {
    font-size: 10px;
    line-height: 20px;
    color: rgb(134, 144, 156);
  }
}
</style>